<template>
  <div>
    <!-- <h1>{{ msg }}</h1>
    <h1>{{ obj.name }}</h1>
    <p>{{ obj.name }}是{{ obj.age > 18 ? "美女" : "美少女" }}</p>
    <a :href="url">点击跳转，看美女</a>
    <img :src="imgUrl" alt="" srcset="" /> -->
    <p>组长要请我吃{{ count }}次饭</p>
    <button @click="count = count + 1">+1</button>
    <button v-on:click="addFn">-1</button>
    <button v-on:click="addCountFn(5)">+5</button>

    <a @click="one" href="">百度</a>
    <a @click="two(100, $event)" href="">淘宝</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 1,
      imgUrl:
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202104%2F04%2F20210404122758_2c825.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670400938&t=65435640a8863aaa20ddb9ce88ec86a9",
      msg: "谁是美女？",
      obj: {
        name: "鞠婧祎",
        age: 18,
      },
      url: "https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E9%9E%A0%E5%A9%A7%E7%A5%8E&hs=0&pn=1&spn=0&di=46137345&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=2093423117%2C310108122&os=3300655103%2C1712529221&simid=3372954382%2C141731084&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=&bdtype=11&oriquery=%E9%9E%A0%E5%A9%A7%E7%A5%8E&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%3A%2F%2Fww3.sinaimg.cn%2Fmw690%2F69ac73c0ly1h7owt44znqj20u013zn3r.jpg%26refer%3Dhttp%3A%2F%2Fwww.sina.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Dauto%3Fsec%3D1670400804%26t%3D7e316c28200824a391597f22efca20b7&fromurl=ippr_z2C%24qAzdH3FAzdH3Fojtk5_z%26e3Bv54AzdH3Fdmlan9m8n9AzdH3FM10W7skeV&gsm=&islist=&querylist=&dyTabStr=MCwxLDMsNiwyLDQsNSw3LDgsOQ%3D%3D",
    };
  },

  methods: {
    addFn() {
      this.count--;
    },
    addCountFn(num) {
      this.count = this.count + num;
    },

    one(e) {
      e.preventDefault();
    },
    two(num, e) {
      console.log(num);
      e.preventDefault();
    },
  },
};
</script>

<style lang='less'>
body {
  font-size: 30px;
  color: pink;
  text-align: center;
}
img {
  width: 200px;
}
button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 18px;
  color: red;
}
</style>